<template>
  <view class="page">
    <view class="search-bar">
      <view class="search-input">
        <input type="text" v-model="searchContent" placeholder="请输入短信内容" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <u-dropdown class="dropdown" :activeColor="activeColor" :borderBottom="borderBottom" :close-on-click-mask="mask">
      <u-dropdown-item @change="goodsTypeChange" v-model="goodsType" title="物品类型"
        :options="goodsTypeOption"></u-dropdown-item>
      <u-dropdown-item @change="releaseTypeChange" v-model="releaseType" title="发布类型"
        :options="releaseTypeOption"></u-dropdown-item>
      <u-dropdown-item @change="userTypeChange" v-model="userType" title="发布者"
        :options="userTypeOption"></u-dropdown-item>
    </u-dropdown>
    <!-- <view class="search">
      <u-search v-model="searchContent" @custom="search" style="margin-bottom: 10rpx;" @search="search">
      </u-search>
      <u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="borderBottom">
        <u-dropdown-item @change="goodsTypeChange" v-model="goodsType" title="物品类型"
          :options="goodsTypeOption"></u-dropdown-item>
        <u-dropdown-item @change="releaseTypeChange" v-model="releaseType" title="发布类型"
          :options="releaseTypeOption"></u-dropdown-item>
        <u-dropdown-item @change="userTypeChange" v-model="userType" title="发布者"
          :options="userTypeOption"></u-dropdown-item>
      </u-dropdown>
    </view> -->
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="card-list">
        <view v-for="(item, index) in list" :key="item.id" class="card-item" @click="navTo('detail?id='+item.id)">
          <view class="card-image">
            <image :src="getImage(item.pics)" mode="aspectFit" lazy-load="true">
              <view slot="error" style="font-size: 24rpx;">加载失败</view>
            </image>
          </view>
          <view class="card-ft">
            <view class="card-title">
              <span
                class="red">{{selectDictLabel(releaseTypeList,item.releaseType)}}</span>/{{selectDictLabel(goodsTypeList,item.goodsType)}}
            </view>
            <view class="card-desc">{{item.createTime}}</view>
          </view>
        </view>
      </view>
      <!-- <view class="page-box">
        <view class="order" v-for="(item, index) in list" :key="item.id" @click="navTo('detail?id='+item.id)">
          <view class="top">
            <view class="left">
              <view>{{ item.title }}</view>
            </view>
          </view>
          <view class="item">
            <view class="left" v-if="item.pics!=''">
              <image :src="getImage(item.pics)" mode="aspectFit" lazy-load="true">
                <view slot="error" style="font-size: 24rpx;">加载失败</view>
              </image>
            </view>
            <view class="content">
              <view class="title u-line-3" style="color:darkgray">{{ item.goodsDesc }}</view>
            </view>
          </view>
          <view class="bottom">
            <view class="delivery-time" style="color: darkgray;">{{ item.createTime }}</view>
            <view class="right"> <span
                style="color: red;">{{selectDictLabel(releaseTypeList,item.releaseType) }}</span>/<span
                style="color: gray;">{{selectDictLabel(goodsTypeList,item.goodsType) }}</span></view>
          </view>
        </view>
      </view> -->
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
    <!-- <view class="btn-plus" @click="navTo('form')">
      <u-icon name="plus-circle-fill" size="90" color="#3d87ff"></u-icon>
    </view> -->
    <view class="add-btn" @click="navTo('form')">
      <image src="/static/images/icon_add_message.png" mode=""></image>
    </view>
  </view>
</template>

<script>
  import {
    validatenull
  } from '@/common/validate.js'
  export default {
    components: {

    },
    data() {
      return {
        mask: true,
        borderBottom: false,
        activeColor: '#2979ff',
        searchContent: '',
        goodsType: '',
        releaseType: '',
        userType: '',
        query: {
          current: 1,
          size: 20
        },
        releaseTypeList: [],
        goodsTypeList: [],
        releaseTypeOption: [],
        goodsTypeOption: [],
        userTypeOption: [],
        list: [],
        pages: 0,
        loadStatus: 'loadmore',
        options: [{
          text: '删除',
          style: {
            background: '#dd524d'
          }
        }],
        show: true,
        mode: 'date'
      };
    },
    onLoad() {
      this.initReleaseType();
      this.initGoodsType();
      this.loadList();
      this.initUserType();
    },
    methods: {
      getImage(param) {
        if (!validatenull(param)) {
          let fileList = JSON.parse(param)
          if (fileList.length > 0) {
            return fileList[0].value;

          }
        }
      },
      initGoodsType() {
        this.$u.api.dictBizData({
          code: 'mis_goods_type'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          this.releaseType = res.data;
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.goodsTypeOption = detaiList;
          this.goodsTypeList = res.data;
        });
      },
      initReleaseType() {
        this.$u.api.dictBizData({
          code: 'mis_release_type'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          this.releaseType = res.data;
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.releaseTypeOption = detaiList;
          this.releaseTypeList = res.data;
        });
      },
      initUserType() {
        this.$u.api.dictBizData({
          code: 'mis_user_type'
        }).then(res => {
          let detaiList = [];
          let detailJson = {
            'label': '全部',
            'value': ''
          }
          detaiList.push(detailJson)
          this.releaseType = res.data;
          res.data.forEach((item) => {
            detaiList.push({
              'label': item.dictValue,
              'value': item.dictKey
            });
          })
          this.userTypeOption = detaiList;
        });
      },
      goodsTypeChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.goodsType = index
        this.loadList()
      },
      releaseTypeChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.releaseType = index
        this.loadList()
      },
      userTypeChange(index) {
        this.list = [];
        this.query.current = 0;
        this.query.userType = index
        this.loadList()
      },
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      loadList() {
        this.$u.api.mis.lostAndFound.list(this.query).then(res => {
          if (!res.data.records || res.data.records.length == 0) {
            this.loadStatus = "nomore";
            return;
          }
          this.list = this.list.concat(res.data.records);
          this.pages = res.pages;
          this.query.current = res.data.current;
          this.query.size = res.data.size;
          this.loadStatus = "loadmore";
        });
      },
      optionsClick(rowIndex, btnIndex) {
        if (btnIndex == 0) {
          let self = this;
          uni.showModal({
            title: '提示',
            content: '确认要删除该数据吗？',
            showCancel: true,
            success: function(res2) {
              if (res2.confirm) {
                let row = self.list[rowIndex];
                self.$u.api.testData.delete({
                  id: row.id
                }).then(res => {
                  self.$u.toast(res.message);
                  if (res.result == 'true') {
                    self.list.splice(rowIndex, 1);
                  }
                });
              }
            }
          });
        }
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.query.searchContent = value;
        this.loadList();
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      onNavigationBarButtonTap(e) {
        uni.navigateTo({
          url: `/pages/mis/lostAndFound/form`
        })
      },
    }
  };
</script>


<style>
  /* #ifndef H5 */
  page {
    height: 100%;
    background-color: #f2f2f2;
  }

  /* #endif */
</style>

<style lang="scss" scoped>
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .dropdown {
    height: 80rpx;
    background: #fff;
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx - 80rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .card-list {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0;
  }

  .card-item {
    width: 100%;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;
    overflow: hidden;
  }

  .card-image {
    width: 100%;
    height: 300rpx;
    border-radius: 8rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .card-ft {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #999;
  }

  .card-title {
    color: #333333;

    .red {
      color: #D43030;
    }
  }

  .add-btn {
    position: absolute;
    right: 32rpx;
    bottom: 288rpx;
    z-index: 99;
    width: 88rpx;
    height: 88rpx;

    image {
      width: 88rpx;
      height: 88rpx;
      vertical-align: top;
    }
  }
</style>